<!--
 * @Descripttion:
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-10-12 14:44:17
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:38:36
-->

<template>
  <el-dialog
    title="新增人员"
    :visible.sync="dialog.studentShow"
    width="60%"
    @close="onClose"
    custom-class="dialogClass"
    :close-on-click-modal="false"
  >
    <el-form
      :model="addForm"
      ref="addForm"
      :rules="newStaffrules"
      label-position="top"
      v-if="dialog.studentShow"
    >
      <div class="vertical">基础信息</div>
      <div class="basics">
        <el-form-item label="姓名" prop="name">
          <el-input
            v-model="addForm.name"
            style="width: 330px"
            placeholder="请输入员工真实姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input
            v-model="addForm.phoneNumber"
            placeholder="请输入员工手机号"
            style="width: 330px"
            oninput="value=value.replace(/[^\d]/g,'')"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="addForm.sex" label="0">男</el-radio>
          <el-radio v-model="addForm.sex" label="1">女</el-radio>
        </el-form-item>
        <el-form-item label="员工生日">
          <el-date-picker
            v-model="addForm.birthday"
            type="date"
            style="width: 330px"
            placeholder="请选择员工生日"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="身份证号码" prop="idNumber">
          <el-input
            v-model="addForm.idNumber"
            placeholder="请输入员工身份证"
            style="width: 330px"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证有效期">
          <el-date-picker
            v-model="addForm.idStartTime"
            type="date"
            style="width: 330px"
            placeholder="请选择身份证有效期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="公司名称">
          <el-input
            v-model="addForm.companyName"
            placeholder="请输入公司名称"
            style="width: 330px"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-input
            v-model="addForm.deptName"
            placeholder="请输入部门名称"
            style="width: 330px"
          ></el-input>
        </el-form-item>
      </div>
      <div class="vertical" style="margin-top: 20px">图片信息</div>
      <div class="image">
        <el-form-item label="身份证正面">
          <el-upload
            :class="{ disabled: fileList.length > 0 }"
            ref="upload"
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            accept="image/jpeg,image/png"
            :before-upload="onBeforeUpload"
            :limit="1"
            :on-change="getFile"
            :file-list="fileList"
            :on-remove="fileRemove"
            v-loading="loading"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <span class="suggest">图片建议上传：jpg/png，最多上传一张</span>
        </el-form-item>
        <el-form-item label="身份证反面">
          <el-upload
            :class="{ disabled1: fileList1.length > 0 }"
            ref="upload1"
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            accept="image/jpeg,image/png"
            :before-upload="onBeforeUpload"
            :limit="1"
            :on-change="getFile1"
            :file-list="fileList1"
            :on-remove="fileRemove1"
            v-loading="loading1"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <span class="suggest">图片建议上传：jpg/png，最多上传一张</span>
        </el-form-item>
        <el-form-item label="证件照">
          <el-upload
            :class="{ disabled2: fileList2.length > 0 }"
            ref="upload2"
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            accept="image/jpeg,image/png"
            :before-upload="onBeforeUpload"
            :limit="1"
            :on-change="getFile2"
            :file-list="fileList2"
            :on-remove="fileRemove2"
            v-loading="loading2"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <span class="suggest">图片建议上传：jpg/png，最多上传一张</span>
        </el-form-item>
        <el-form-item label="学历证">
          <el-upload
            :class="{ disabled3: fileList3.length > 0 }"
            ref="upload3"
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            accept="image/jpeg,image/png"
            :before-upload="onBeforeUpload"
            :limit="1"
            :on-change="getFile3"
            :file-list="fileList3"
            :on-remove="fileRemove3"
            v-loading="loading3"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <span class="suggest">图片建议上传：jpg/png，最多上传一张</span>
        </el-form-item>
      </div>
      <div class="vertical" style="margin-top: 20px">其他信息</div>
      <div class="other">
        <el-form-item label="工号">
          <el-input
            v-model="addForm.jobNumber"
            placeholder="请输入员工工号"
            style="width: 330px"
          ></el-input>
        </el-form-item>
        <el-form-item label="文化程度" prop="education">
          <el-select
            v-model="addForm.education"
            placeholder="请选择文化程度"
            style="width: 330px"
          >
            <el-option
              v-for="item in degree"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="劳动合同">
          <el-upload
            class="upload-demo"
            action="#"
            :on-change="handleChange"
            :file-list="fileList4"
            :http-request="httpRequest"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="劳动合同开始时间">
          <el-date-picker
            v-model="addForm.contractStart"
            type="date"
            style="width: 330px"
            placeholder="请选择劳动合同开始时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="劳动合同结束时间">
          <el-date-picker
            v-model="addForm.contractEnd"
            type="date"
            style="width: 330px"
            placeholder="请选择劳动合同结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="联系地址">
          <el-input
            v-model="addForm.contactAddress"
            placeholder="请填写联系地址"
            style="width: 330px"
          ></el-input>
        </el-form-item>
        <el-form-item label="简历信息">
          <el-input
            type="textarea"
            v-model="addForm.resumeInformation"
            rows="4"
            placeholder="请填写简历信息"
            style="width: 330px"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注信息">
          <el-input
            type="textarea"
            v-model="addForm.remark"
            rows="4"
            placeholder="请填写备注信息"
            style="width: 330px"
          ></el-input>
        </el-form-item>
        <el-form-item label="工作状态">
          <el-select
            v-model="addForm.jobState"
            placeholder="请选择工作状态"
            style="width: 330px"
          >
            <el-option
              v-for="item in jobState"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>
    </el-form>
    <span slot="footer" v-if="chioose !== 1">
      <el-button @click="dialog.studentShow = false">取消</el-button>
      <el-button
        type="primary"
        @click="newStudent"
        v-if="chioose == 2"
        v-loading.fullscreen.lock="fullscreenLoading"
      >
        保存
      </el-button>
      <el-button
        type="primary"
        @click="onSubmit"
        v-else
        v-loading.fullscreen.lock="fullscreenLoading"
        >保存</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { addStudent, editStudent } from "@/api/IndividualUser/traineeInfo.js";
import { getUrl } from "@/api/registration";
var newForm = {
  name: "",
  phoneNumber: "",
  sex: "0",
  birthday: "",
  idNumber: "",
  idStartTime: "",
  companyName: "",
  deptName: "",
  idPositive: "",
  idBack: "",
  idPhoto: "",
  educationPhoto: "",
  jobNumber: "",
  education: "",
  contractStart: "",
  contractEnd: "",
  contactAddress: "",
  resumeInformation: "",
  remark: "",
  jobState: "",
  uploadName: "",
};
export default {
  props: {
    dialog: {
      type: Object,
      required: true,
    },
  },
  data() {
    let checkMobile = (rule, value, callback) => {
      // 验证手机号的正则表达式
      const regMobile =
        /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57]|16[0-9])[0-9]{8}$/;

      if (regMobile.test(value)) {
        // 合法的手机号
        return callback();
      }
      // 不合法
      callback(new Error("请输入合法的手机号"));
    };
    let checkId = (rule, value, callback) => {
      // 验证身份证的正则表达式
      const regId =
        /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

      if (regId.test(value)) {
        // 合法的身份证号
        return callback();
      }
      // 不合法
      callback(new Error("请输入合法的身份证号码"));
    };
    return {
      loading: false,
      loading1: false,
      loading2: false,
      loading3: false,
      fullscreenLoading: false,
      fileList: [],
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      file: "",
      chioose: 2,
      addForm: {
        ...newForm,
      },
      jobState: [
        {
          value: "1",
          label: "在职",
        },
        {
          value: "2",
          label: "离职",
        },
      ],
      degree: [
        {
          value: "1",
          label: "小学",
        },
        {
          value: "2",
          label: "初中",
        },
        {
          value: "3",
          label: "高中/中专",
        },
        {
          value: "4",
          label: "专科",
        },
        {
          value: "5",
          label: "本科",
        },
        {
          value: "6",
          label: "研究生",
        },
      ],
      newStaffrules: {
        name: [{ required: true, message: "请输入人员姓名", trigger: "blur" }],
        phoneNumber: [
          { required: true, message: "请输入用户手机号", trigger: "blur" },
          { required: true, validator: checkMobile, trigger: "blur" },
        ],
        idNumber: [
          {
            required: true,
            min: 18,
            max: 18,
            message: "请输入人员身份证号",
            trigger: "blur",
          },
          {
            required: true,
            validator: checkId,
            trigger  : "blur",
          },
        ],
        companyName: [
          { required: true, message: "请输入公司名称！", trigger: "blur" },
        ],
        education: [
          { required: true, message: "请选择文化程度", trigger: "change" },
        ],
      },
      positive: "",
      back: "",
      photo: "",
      eduPhoto: "",
    };
  },
  created() {
    // console.log(1);
  },
  watch: {
    fileList: {
      deep: true,
      handler() {
        // if (this.fileList.length !== 0) {
        //   $(".el-upload").eq(0).css("display", "none");
        // }
        // if (this.fileList.length == 0) {
        //   $(".el-upload").eq(0).css("display", "block");
        // }
      },
    },
  },
  methods: {
    fileRemove() {
      this.fileList = [];
    },
    fileRemove1() {
      this.fileList1 = [];
    },
    fileRemove2() {
      this.fileList2 = [];
    },
    fileRemove3() {
      this.fileList3 = [];
    },
    //   编辑
    onSubmit() {
      this.$refs.addForm.validate(async (valid) => {
        if (!valid) return;
        if (
          this.loading == true ||
          this.loading1 == true ||
          this.loading2 == true ||
          this.loading3 == true
        ) {
          return this.$message.info("图片正在上传中，请稍等");
        }
        this.fullscreenLoading = true;
        let fd = new FormData();
        fd.append("personStr", JSON.stringify(this.addForm));
        fd.append("file", this.file);
        fd.append("positive", this.positive);
        fd.append("back", this.back);
        fd.append("photo", this.photo);
        fd.append("eduPhoto", this.eduPhoto);
        editStudent(fd).then((res) => {
          this.$message.success(res.msg);
          this.$parent.getList();
          this.addForm = {
            ...newForm,
          };
          this.fullscreenLoading = false;
          this.dialog.studentShow = false;
        });
      });
    },
    httpRequest(data) {
      this.file = data.file;
    },
    handleChange(file) {
      this.putStaff.fileName = "";
      this.newStaffForm.uploadName = file.name;
    },
    onBeforeUpload() {
      const isIMAGE = file.type === "image/jpeg" || "image/png";
      if (!isIMAGE) {
        this.$message.error("上传文件只能是图片格式!");
      }
      return isIMAGE;
    },
    getFile(file) {
      this.compress(file.raw).then((res) => {
        var fd = new FormData();
        fd.append("file", res);
        getUrl(fd).then((res) => {
          this.positive = res.msg;
        });
      });
      this.fileList.push(file);
    },
    getFile1(file) {
      this.compress(file.raw).then((res) => {
        var fd = new FormData();
        fd.append("file", res);
        getUrl(fd).then((res) => {
          this.back = res.msg;
        });
      });
      this.fileList1.push(file);
    },
    getFile2(file) {
      this.compress(file.raw).then((res) => {
        var fd = new FormData();
        fd.append("file", res);
        getUrl(fd).then((res) => {
          this.photo = res.msg;
        });
      });
      this.fileList2.push(file);
    },
    getFile3(file) {
      this.compress(file.raw).then((res) => {
        var fd = new FormData();
        fd.append("file", res);
        getUrl(fd).then((res) => {
          this.eduPhoto = res.msg;
        });
      });
      this.fileList3.push(file);
    },
    handleRemove(file) {
      let fileList = this.$refs.upload.uploadFiles;
      let index = fileList.findIndex((fileItem) => {
        return fileItem.uid === file.uid;
      });
      fileList.splice(index, 1);
    },
    onClose() {
      this.dialog.studentShowEject = false;
    },
    newStudent() {
      this.$refs.addForm.validate(async (valid) => {
        if (!valid) return;
        if (
          this.loading == true ||
          this.loading1 == true ||
          this.loading2 == true ||
          this.loading3 == true
        ) {
          return this.$message.info("图片正在上传中，请稍等");
        }
        this.fullscreenLoading = true;
        let fd = new FormData();
        fd.append("personStr", JSON.stringify(this.addForm));
        fd.append("file", this.file);
        fd.append("positive", this.positive);
        fd.append("back", this.back);
        fd.append("photo", this.photo);
        fd.append("eduPhoto", this.eduPhoto);
        // let person = this.newStaffForm;
        let res = await addStudent(fd);
        this.$message.success(res.msg);
        this.$parent.getList();
        this.addForm = {
          ...newForm,
        };
        this.fullscreenLoading = false;
        this.dialog.studentShow = false;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.vertical {
  padding-left: 100px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2b2b2b;
  line-height: 14px;
}
.vertical::before {
  content: "";
  display: inline-block;
  margin-right: 10px;
  width: 3px;
  height: 14px;
  background-color: #1267fa;
}
.basics {
  display: flex;
  flex-wrap: wrap;
}
.el-form-item {
  margin-top: 17px;
  margin-left: 100px;
  width: 330px;
  margin-right: 50px;
  margin-bottom: 0px;
}
/deep/ .el-form-item__label {
  padding: 0;
}
.image {
  display: flex;
  flex-wrap: wrap;
}
.suggest {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
}
.other {
  display: flex;
  flex-wrap: wrap;
}
/deep/ .el-dialog__body {
  height: 700px;
  overflow-y: auto;
}
/deep/ .disabled .el-upload--picture-card {
  display: none;
}
/deep/ .disabled1 .el-upload--picture-card {
  display: none;
}
/deep/ .disabled2 .el-upload--picture-card {
  display: none;
}
/deep/ .disabled3 .el-upload--picture-card {
  display: none;
}
</style>
